<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();%>
<%String contextPath = request.getContextPath();%>
<jsp:include page="inc.jsp" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<script type="text/javascript">
/* jquery入口*/
$(function() {
    loadgrid(); //加载datagrid
});
/* 加载datagrid列表*/
    function loadgrid(){
        $('#grid').datagrid({
        title : '结账',
        url : getCurProjPath() + '/SelectItemTemp',//'sale_data.json',
        onLoadSuccess : function(data){ 
        	console.info(data);
			var total = 0;
			for(var i = 0;i<data.rows.length;i++){
				total = total + data.rows[i].subtotal;
			}
			document.getElementById("amount").value = total.toFixed(1);
        },
        loadMsg : '正在加载…',  //当从远程站点载入数据时，显示的一条快捷信息。
        fit : true,  //窗口自适应
        nowrap: false, //设置为true，当数据长度超出列宽时将会自动截取
        fitColumns : false, // 自动适应列宽
        singleSelect : true, // 每次只选中一行
        sortName : 'id', //默认排序字段
        sortOrder : 'asc', // 升序asc/降序desc
        striped : true,  // 隔行变色  
        pagination : false,  // 在底部显示分页工具栏
        pageNumber : 1, //初始化页码 
        pageSize : 10,  // 指定每页的大小，服务器要加上page属性和total属性
        pageList : [ 10, 20, 30 ], // 可以设置每页记录条数的列表，服务器要加上rows属性
        //rownumbers : true, // 在最前面显示行号 
        idField : 'id', // 主键属性
        showFooter: false,//底部固定行
        // 冻结列,当很多咧出现滚动条时该列不会动
        frozenColumns : [ [
        {title : '序号', width : '80', field : 'id', sortable : true}, 
        {	title : '书名', 
        	width : '150', 
        	field : 'productName', 
        	sortable : true,
        	formatter: function(value,row){if (row.product){return row.product.productName;}}
        }, 
        {	title : 'ISBN码', 
        	width : '150', 
        	field : 'productNo', 
        	sortable : true,
        	formatter: function(value,row){if (row.product){return row.product.productNo;}}
        }, 
        {	title : '定价', 
        	width : '80',    
        	field : 'price',
        	sortable : true, 
        	formatter: function(value,row){if (row.product){return row.product.price;}}
        }
        ] ],
        columns : [ [ 
        {title : '折扣', width : '80',    field : 'discount', sortable : false}, 
        {title : '数量', width : '80',    field : 'quantity', sortable : false},
        {title : '小计', width : '80',    field : 'subtotal',sortable : false}
        ] ],
        
        // 工具栏按钮
        toolbar: '#tb'
        
    });
}
    
		// 获取项目的URL
    	function getCurProjPath() {
    		var curWwwPath = window.document.location.href;
    		var pathName = window.document.location.pathname;
    		var pos = curWwwPath.indexOf(pathName);
    		var localhostPath = curWwwPath.substring(0, pos);
    		var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    		return (localhostPath + projectName);
    	}
    	//enterProduct
    	function enterProduct(){
    		var customerNoValue = $('#customerNo').val();
    		var productNoValue = $('#productNo').val();
    		var quantityValue = $('#quantity').val();
    		var discountValue = $('#discount').val();
    		$.post("enterProduct",{customerNo:customerNoValue,productNo:productNoValue,quantity:quantityValue,discount:discountValue},function(){
    			$('#grid').datagrid("reload");
    		});
    		
    	}
    	/* 删除数据*/
        $(function(){
            $('#remove').bind('click', function(){
                var row = $('#grid').datagrid('getSelected');
                //如果没有选中记录
                if(row == null){
                    $.messager.alert("提示", "请选择一条记录",'info');
                    return;
                }
                $.messager.confirm('确认', '确定要删除吗？', function (r) {
                        if (r) {
                            //提交到后台的action
                            $.post(getCurProjPath() + '/DeleteCustomer', { id: row.id }, function (result) { 
                                if (result.success) {
                                    reload();
                                    $.messager.show({   //显示正确信息
                                        title: '提示',
                                        msg: result.msg
                                    });                                 
                                } else {
                                    $.messager.show({   //显示错误信息
                                        title: '错误',
                                        msg: result.msg
                                    });
                                }
                            }, 'json');
                        }
                    });
            });
        });
    	
    	//结账
    	function closeAccount(){
    		var url = "AddSaleOrder";
    		var customerNoValue = $('#customerNo').val();
    		var totalValue = $('#amount').val();
    		var payStyleValue = $('#payStyle').combobox('getValue');
    		var stateValue;
    		if($('#pay_back').val()==''||$('#pay_back').val()<0){
    			stateValue = 0;
    		}else{
    			var stateValue = 1;
    		}
    		var data = {customerNo:customerNoValue,total:totalValue,state:stateValue,paymentMethod:payStyleValue};
    		$.post(url,data,function(){
    			$.get(url,function(){
        			window.location.href='sale.jsp';
        		});
    		});
			
    	}
    	
    	//找零
    	function payOff(e){
    		var pay = document.getElementById("pay").value;
    		var total = document.getElementById("amount").value;
    		var payback = pay - total;
    		if(!e) e = window.event;//火狐中是 window.event
            if((e.keyCode || e.which) == 13){
            	document.getElementById("pay_back").value = payback.toFixed(1);
            }
    		
    	}
    	
</script>

<body>
	<div style="width:100%;height:100%;padding:0px;overflow:hidden">
		<table id="grid"></table>
	</div>
     <div id='tb'>
    	<br />
     	<div>
     		<font style="font-family:微软雅黑;font-size:50px;color:red;">总额：</font><input id="amount" type="text" readOnly="true" style="height: 70;width:170;text-align:center; font-size:48;color:#FF0000;padding:5px 5px 5px 5px;background-color:transparent;border:0">
     		<font style="font-family:微软雅黑;font-size:35px;">支付:</font><input id="pay" onkeydown="payOff(event);" type="text" style="height: 70;width:170;text-align:center; font-size:48;padding:5px 5px 5px 5px;background-color:transparent;border:0">
     		<font style="font-family:微软雅黑;font-size:35px;">找零:</font><input id="pay_back" type="text" readOnly="true" style="height: 70;width:170;text-align:center; font-size:48;color:#FF0000;padding:5px 5px 5px 5px;background-color:transparent;border:0">	
     	</div>
     	<br />
     	<div>
     		<font style="font-family:微软雅黑;font-size:16px;">客户编号:</font><input id="customerNo" class="easyui-textbox"  style="width:120px;height:26px;">
     		支付方式：<select id="payStyle" class="easyui-combobox" name="paymentStyle" data-options="url:'paymentStyle.json',method:'get',valueField:'id',textField:'paymentName',panelHeight:'auto',width:85"></select>
     		<a id="calculate" onclick="closeAccount()" class="easyui-linkbutton" iconCls="icon-ok">结算</a>
     	</div>
     	<br />
     	<hr>
     	<br />
     	<div>
     		<div>
     			Book:<input id="productNo" class="easyui-textbox"  style="width:120px;height:26px;">
     			数量:<input id="quantity" class="easyui-numberbox"  style="width:80px;height:26px;" value="1" precision="0">
     			折扣:<input id="discount" class="easyui-numberbox"  style="width:80px;height:26px;" value="1.00" precision="2">
     			<a id="enterProduct" class="easyui-linkbutton" iconCls="icon-ok" onclick="enterProduct()">录入</a>
     			<a id="remove" class="easyui-linkbutton" iconCls="icon-remove">删除</a>
     		</div>
     	</div>
     	<br />
     </div>
</body>
</html>